<template>
  <div class="avanced_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('AvancedAuthentication.Advanced certification')"></v-nav>
    <div class="avanced_mod_box">
      <div class="moomoo_form">
        <div class="moomoo_form_input">
          <p>{{ $t('AvancedAuthentication.type of certificate') }}</p>
          <van-field class="input" readonly name="picker" :disabled="true" :value="form.type.text" :placeholder="$t('AvancedAuthentication.Please select the document type')" @click="showPicker = false" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="cardTypeList" @confirm="onConfirm" @cancel="showPicker = false" :default-index="form.type.value" :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
          </van-popup>
        </div>

        <div class="moomoo_form_input">
          <p>{{ $t('AvancedAuthentication.Name') }}</p>
          <van-field class="input" v-model="form.name" :disabled="true" :placeholder="$t('AvancedAuthentication.Please type in your name')" />
        </div>

        <div class="moomoo_form_input">
          <p>{{ $t('AvancedAuthentication.ID number') }}</p>
          <van-field class="input" v-model="form.number" :disabled="true" :placeholder="$t('AvancedAuthentication.Please enter your ID number')" />
        </div>

        <div class="moomoo_form_upload">
          <p>{{ $t('AvancedAuthentication.ID photo') }}</p>
          <div class="uploadList">
            <div>
              <van-uploader v-model="form.fileList1" :max-count="1" :disabled="isDisabled" :deletable="!isDisabled" :max-size="5 * 1024 * 1024" @oversize="onOversize" :after-read="uploadFile" name="1" class="upload" />
              <span>{{ $t('AvancedAuthentication.ID card front photo') }}</span>
            </div>

            <div>
              <van-uploader v-model="form.fileList2" :max-count="1" :disabled="isDisabled" :deletable="!isDisabled" :max-size="5 * 1024 * 1024" @oversize="onOversize" :after-read="uploadFile" name="2" class="upload" />
              <span>{{ $t('AvancedAuthentication.Photo of the reverse side of the ID') }}</span>
            </div>

            <div>
              <van-uploader v-model="form.fileList3" :max-count="1" :disabled="isDisabled" :deletable="!isDisabled" :max-size="5 * 1024 * 1024" @oversize="onOversize" :after-read="uploadFile" name="3" class="upload" />
              <span>{{ $t('AvancedAuthentication.ID photo in hand') }}</span>
            </div>
          </div>
        </div>

        <div class="moomoo_form_submit">
          <van-button color="#DAAB51" :disabled="isDisabled" @click="advancedSubmit">{{ advancedSubmitText }}</van-button>
        </div>
      </div>

      <div class="moomoo-hint">
        <p>{{ $t('AvancedAuthentication.info1') }}</p>
        <h1 style="margin-top: 12px">{{ $t('AvancedAuthentication.info2') }} :</h1>
        <p style="text-align: center; color: #ff0000">
          <b>{{ $t('AvancedAuthentication.info9') }}</b>
        </p>
        <p>1.{{ $t('AvancedAuthentication.info3') }} 2.{{ $t('AvancedAuthentication.info4') }} 3.{{ $t('AvancedAuthentication.info5') }} 4.{{ $t('AvancedAuthentication.info6') }} 5.{{ $t('AvancedAuthentication.info7') }} 6.{{ $t('AvancedAuthentication.info8') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdvancedAuthentication',
  data() {
    return {
      form: {
        type: {},
        name: '',
        number: '',
        fileList1: [],
        fileList2: [],
        fileList3: []
      },
      cardTypeList: [
        { text: this.$t('AvancedAuthentication.ID card'), value: 0 },
        { text: this.$t('AvancedAuthentication.passport'), value: 1 },
        { text: this.$t('AvancedAuthentication.driver license'), value: 2 }
      ],
      showPicker: false,
      loading: false,
      isDayTime: false,
      isDisabled: false,
      advancedSubmitText: this.$t('AvancedAuthentication.Submit certification')
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  created() {
    this.getAuthentication()
  },
  methods: {
    async getAuthentication() {
      this.loading = true
      await this.$https.get('/user/getAuthentication').then(res => {
        if (res != undefined && res.code == 1 && res.data) {
          this.form.type.text = this.cardTypeList[res.data.primary_type].text
          this.form.type.value = res.data.primary_type
          this.form.name = res.data.primary_name
          this.form.number = res.data.primary_number
          if (res.data.senior_front.trim() !== '') this.form.fileList1.push({ url: res.data.senior_front, status: 'done' })
          if (res.data.senior_back.trim() !== '') this.form.fileList2.push({ url: res.data.senior_back, status: 'done' })
          if (res.data.senior_hand.trim() !== '') this.form.fileList3.push({ url: res.data.senior_hand, status: 'done' })
          if (res.data.primary_review != 1) {
            this.advancedSubmitText = this.$t('AvancedAuthentication.Please perform primary certification first')
            this.isDisabled = true
          } else {
            if (res.data.senior_review == 0) {
              this.advancedSubmitText = this.$t('AvancedAuthentication.Resubmit')
            } else if (res.data.senior_review == 1) {
              this.advancedSubmitText = this.$t('AvancedAuthentication.Authentication successful')
              this.isDisabled = true
            } else if (res.data.senior_review == 2) {
              this.advancedSubmitText = this.$t('AvancedAuthentication.Certification in progress')
              this.isDisabled = true
            }
          }
        } else {
          this.advancedSubmitText = this.$t('AvancedAuthentication.Please perform primary certification first')
          this.isDisabled = true
        }
      })
      this.loading = false
    },
    onConfirm(value) {
      this.form.type = value
      this.showPicker = false
    },
    onOversize() {
      this.$toast(this.$t('info.info18'))
    },
    async uploadFile(file, detail) {
      if (file.file.type !== 'image/png' && file.file.type !== 'image/jpeg') {
        this.$toast(this.$t('info.info19'))
        switch (detail.name) {
          case '1':
            this.form.fileList1 = []
          case '2':
            this.form.fileList2 = []
          case '3':
            this.form.fileList3 = []
        }
        return
      }
      file.status = 'uploading'
      var formData = new FormData()
      formData.append('file', file.file)
      this.loading = true
      await this.$https.post('/ajax/upload', formData).then(res => {
        if (res != undefined && res.code == 1) {
          file.status = 'done'
          switch (detail.name) {
            case '1':
              return (this.form.fileList1[0].url = res.data.file.full_url)
            case '2':
              return (this.form.fileList2[0].url = res.data.file.full_url)
            case '3':
              return (this.form.fileList3[0].url = res.data.file.full_url)
          }
        } else {
          file.status = 'failed'
        }
      })
      this.loading = false
    },
    async advancedSubmit() {
      if (this.form.fileList1.length === 0 || this.form.fileList1[0].status != 'done') {
        this.$toast(this.$t('AvancedAuthentication.Please upload a front-facing photo of your ID'))
        return
      }
      if (this.form.fileList2.length === 0 || this.form.fileList2[0].status != 'done') {
        this.$toast(this.$t('AvancedAuthentication.Please upload a photo of the reverse side of your ID'))
        return
      }
      if (this.form.fileList3.length === 0 || this.form.fileList3[0].status != 'done') {
        this.$toast(this.$t('AvancedAuthentication.Please upload a photo of your ID card'))
        return
      }

      let params = {
        tab: 'senior',
        senior_front: this.form.fileList1[0].url,
        senior_back: this.form.fileList2[0].url,
        senior_hand: this.form.fileList3[0].url
      }
      this.loading = true
      await this.$https.post('/user/submitAuthentication', params).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.go(-1)
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
